import QtQuick 2.6
import QtQuick.Layouts 1.1

import "../Base/UiBase"
import "../Base/Config"
import "../Base/UiBase/TC" as TC

Rectangle {
    id: root
    property var peer: ({
                            name: "凹凸曼老师  ",
                            head: "../../resources/tests/touxiang01.svg"
                        })

    signal returnClicked

    color: Color.background

    ListModel {
        id: messageModel
        ListElement {
            owner: "peer"
            messageText: "123123123aaaaaaaa"
        }
        ListElement {
            owner: "self"
            messageText: "!!!!!!!!!!!!!!!!!!!!!!!!!"
        }
        ListElement {
            owner: "self"
            messageText: "!!!!!!!!!!!!!!!!!!!!!!!!!这里应该有多行这里应该有多行这里应该有多行这里应该有多行这里应该有多行  "
        }
        ListElement {
            owner: "peer"
            messageText: "123123123aaaaaaaa"
        }
    }

    MouseArea {
        anchors.fill: parent
        z: -1
    }

    ColumnLayout {
        anchors.fill: parent
        spacing: 0

        // header
        Rectangle {
            z: 1
            Layout.fillWidth: true
            Layout.preferredHeight: 96 * Size.ratio
            color: Color.foreground
            RowLayout {
                width: parent.width
                height: parent.height

                // back button
                MouseArea {
                    Layout.preferredWidth: 80 * Size.ratio
                    Layout.fillHeight: true
                    SvgzImage {
                        width: 80 * Size.ratio
                        height: 96 * Size.ratio
                        source: "../../resources/comment/fanhiu01.svg"
                    }
                    onClicked: returnClicked()
                } // end back button

                // title
                Item {
                    Layout.fillWidth: true
                    Layout.fillHeight: true
                    Text {
                        anchors.centerIn: parent
                        text: peer.name
                        font.pixelSize: Size.titleFont
                    }
                } // end title

                // menu button
                MouseArea {
                    property bool activated: false

                    Layout.preferredWidth: 80 * Size.ratio
                    Layout.fillHeight: true

                    onClicked: activated = !activated
                    SvgzImage {
                        width: 80 * Size.ratio
                        height: 96 * Size.ratio
                        source: parent.activated ? "../../resources/communication/gengduo02.svg" : "../../resources/communication/gengduo01.svg"
                    }
                    MoreContext {
                        z: 1
                        anchors {
                            top: parent.bottom
                            right: parent.right
                            rightMargin: 21 * Size.ratio
                        }
                        visible: parent.activated
                    }
                } // end menu button
            }
        } // end header

        // body
        ListView {
            Layout.fillWidth: true
            Layout.fillHeight: true
            delegate: Item {
                id: itemRoot
                width: parent.width
                height: textLabel.height + 50 * Size.ratio
                Row {
                    y: 50 * Size.ratio
                    width: parent.width
                    height: textLabel.height
                    layoutDirection: owner === "peer" ? Qt.LeftToRight : Qt.RightToLeft
                    Item {
                        width: 20 * Size.ratio
                        height: parent.height
                    }
                    HeadHolder {
                        id: head
                        SvgzImage {
                            width: 80 * Size.ratio
                            height: 80 * Size.ratio
                            source: peer.head
                        }
                    }

                    Item {
                        width: Size.elementInterval + 9 * Size.ratio
                        height: parent.height
                    }
                    Text {
                        id: textLabel
                        width: 510 * Size.ratio
                        height: contentHeight + topPadding + bottomPadding

                        topPadding: 26 * Size.ratio
                        bottomPadding: 26 * Size.ratio
                        leftPadding: 10 * Size.ratio
                        rightPadding: 20 * Size.ratio
                        text: messageText
                        font.pixelSize: Size.normalFont
                        wrapMode: Text.WrapAnywhere
                        Rectangle {
                            z: -1
                            color: owner === "peer" ? Color.foreground : Color.main
                            width: parent.width
                            height: parent.height
                            radius: 10 * Size.ratio
                            Rectangle {
                                z: -2
                                y: textLabel.topPadding + textLabel.font.pixelSize / 2 - height / 2
                                anchors {
                                    left: parent.right
                                    leftMargin: -width / 2
                                }
                                width: 12 * Size.ratio
                                height: width
                                transformOrigin: Rectangle.Center
                                rotation: 45
                                scale: 1
                                visible: owner === "self"
                                color: parent.color
                            }
                        }
                    }
                }
            }
            model: messageModel
        } // end body

        // footer
        Rectangle {
            Layout.fillWidth: true
            Layout.preferredHeight: 100 * Size.ratio
            color: "#dddddd"
            RowLayout {
                anchors.fill: parent

                // more button
                MouseArea {
                    id:moreButton

                    property bool activated: false

                    Layout.preferredWidth: 100 * Size.ratio
                    Layout.fillHeight: true

                    onClicked: activated = !activated

                    SvgzImage {
                        anchors.centerIn: parent
                        width: 50 * Size.ratio
                        height: 50 * Size.ratio
                        source: "../../resources/evaluation/p2p/teacher/xiaoanniu01.svg"
                    }
                } // more button

                // message textedit
                Rectangle {
                    Layout.fillWidth: true
                    Layout.preferredHeight: 50 * Size.ratio
                    Layout.alignment: Qt.AlignVCenter
                    color: Color.foreground
                    radius: 5 * Size.ratio
                    TC.TextEdit {
                        anchors.fill: parent
                        padding: parent.radius
                        color: Color.input
                        font.pixelSize: Size.normalFont
                        verticalAlignment: TextInput.AlignVCenter
                    }
                } // message textedit

                // send button
                MouseArea {
                    Layout.preferredWidth: 100 * Size.ratio
                    Layout.fillHeight: true
                    SvgzImage {
                        anchors.centerIn: parent
                        width: 90 * Size.ratio
                        height: 60 * Size.ratio
                        source: "../../resources/comment/fasong01.svg"
                    }
                } // end send button
            }
        } // end footer

        Rectangle {
            Layout.fillWidth: true
            Layout.preferredHeight: 300 * Size.ratio

            color: "#666666"

            visible: moreButton.activated
            Row {
                x: 20 * Size.ratio
                y: 20 * Size.ratio
                spacing: 20 * Size.ratio
                SvgzImage {
                    width: 110 * Size.ratio
                    height: 110 * Size.ratio
                    source: "../../resources/communication/tupian.svg"
                }
                SvgzImage {
                    width: 110 * Size.ratio
                    height: 110 * Size.ratio
                    source: "../../resources/communication/paizhao.svg"
                }
                SvgzImage {
                    width: 110 * Size.ratio
                    height: 110 * Size.ratio
                    source: "../../resources/communication/shoucang.svg"
                }
            }
        }

        Item {
            Layout.fillWidth: true
            Layout.preferredHeight: Size.keyboard.height
        }
    }
}
